import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { add, subAsync } from '@/store/modules/counter.ts'
import style from './index.module.scss'
import { getUserInfo } from '@/api/user'
import { RootState } from '@/store/index'
import { Button } from 'antd'

const Home: React.FC = () => {
  const dispatch = useDispatch() // 调用useDispatch()函数获取dispatch方法
  const { count } = useSelector((state: RootState) => state.counter) // 调用useSelector()函数获取state中的count值
  const onGetList = async () => {
    const res = await getUserInfo({
      start_time: '2024-12-03T10:40:34Z',
      end_time: '2024-11-03T10:40:34Z',
      offset: 0,
      limit: 10,
      group_by: 'drone_id',
      order: 'desc',
      order_by: 'created_time',
    })
    console.log('🌺👉 hahhahahh ==》', res)
  }

  return (
    <>
      <h1>Home Page</h1>
      <Link to="/Layout/About">页面跳转</Link>
      <div className={style.boxStyle}>
        <h1>{count}</h1>
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Button
            type="primary"
            className={style.buttonItem}
            onClick={() => dispatch(add())}
          >
            点击增加1
          </Button>
          <Button type="primary" onClick={() => dispatch(subAsync() as any)}>
            点击异步减1
          </Button>
        </div>
        <Button
          type="primary"
          onClick={onGetList}
          style={{ marginTop: '80px' }}
        >
          请求接口
        </Button>
      </div>
    </>
  )
}
export default Home
